<template>
  <div class="home">
    <div class="header-placeholder"></div>
    <el-container>
      <el-header class="header-first">
        <div>
          <div id="header-first-img">
            <el-avatar size="small" :src="pic(store.state.user.img)" />
            &nbsp;
            <el-button type="text" @click="back()" style="color: #919191;">
              <b>首页-伊凡书城</b>
            </el-button>
          </div>
          <div id="header-first-service">
            <p style="font-size:0.8em;">你好！
              <el-button type="text" @click="handleButtonClick()">
                <span style="color: red;">
					{{showUserName()}}
                </span>
              </el-button>
            </p>
            <el-button type="text" @click="registration">免费注册</el-button>

            <p>
              <el-button type="text" @click="myCart">|&nbsp;我的购物车</el-button>
              <span>
                <el-button type="text" @click="myOrders">|&nbsp;我的订单&nbsp;|</el-button>
              </span>
            </p>

            <el-button type="text" style="color: red;" @click="login.out()">退出</el-button>
          </div>
        </div>
      </el-header>
      <!--  -->
      <el-main class="main-second">
        <router-view />
      </el-main>
      <!--  -->
      <el-footer style="padding: 0;height: 30px;line-height: 30px;">
        <hr style="padding: 0;">
        <p style="font-size: 12px;color: #919191;text-align: center;">
          备案/许可证编号：12009302号-1-www.shiquan.com Copyright
          <span style="color: red;">©</span>
          1号网上书店演示，All Rights Reserved. 复制必究 , Technical Support:
          <span style="font-weight: 600;color:red;">黄俊玮</span>
        </p>
      </el-footer>
    </el-container>
  </div>
</template>


<script setup>
	import store from "../store/index.js";
	import pic from "../api/pic.js";
	import router from "../router";
	import {ElMessage} from "element-plus";
	import login from "../api/public/login";
	
	const myCart = () => {
		router.push('/info/shoppingcart')
	}
	
	const myOrders = () => {
		router.push("/info/orderInfo")
	}

	const back = () => {
		router.push("/welcome")
	}

	const registration = () => {
		if (window.localStorage.getItem("token")) {
			ElMessage.warning("警告：请退出当前账号后再注册！")
			return
		}
		router.push("/registration")
	}

	const handleButtonClick = () => {
		if (store.state.user.role) {
			// 若用户已登录，跳转到用户个人设置页面
			switch (store.state.user.role) {
				case 'adm':
					router.push('/adm/index');
					break;
				case 'usr':
					router.push('/usr/welcome');
			}
		} else {
			// 若用户未登录，跳转到登录页面
			router.push('/login')
		}

	}

	const showUserName = () => {
		let name = store.state.user.name;
		if (name !== undefined && name.length > 0) {
			return name;
		}
		return '请登录';
	}
</script>

<style lang="less">
.home {
  .main-second {
    padding: 0px;
  }

  .header-placeholder {
    height: 4vh;
    line-height: 4vh;
    min-height: 40px;
    /* 与头部高度相同 */
  }

  // 头部操作栏
  .el-header.header-first {
    width: 100%;
    min-width: 1000px;
    height: 4vh !important;
    line-height: 4vh;
    min-height: 40px;

    // 设置内边距布局
    padding-left: 8%;
    padding-right: 8%;

    background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
    color: #919191;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    div:nth-child(1) {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    #header-first-service {
      width: 60%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      p {
        margin: 0;
      }
    }
  }
}
</style>
  